<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百变方块</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            border: none;
            color: #000;

            --game-row: 10;
            --next-block-row: 5;

            --game-width: 306px;
            --game-height: 306px;
            --block-width: 30px;
            --block-height: 30px;
            --next-block-width: 15px;
            --next-block-height: 15px;

            --bg-color: #fff;
            --border-color: #000;
        }

        body {
            width: 100vw;
            height: 100vh;
        }

        .flex-center {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }

        /* 小方格的样式 */
        .cell {
            width: var(--block-width);
            height: var(--block-height);
            background-color: #ccc;
            border: 1px solid #000;
        }

        .next-cell {
            width: var(--next-block-width);
            height: var(--next-block-height);
            background-color: #ce1a1a;
            border: 1px solid #000;
        }

        .current-drag-block .next-cell {
            width: var(--block-width);
            height: var(--block-height)
        }

        .element-shown {
            visibility: visible;
        }

        .element-hidden {
            visibility: hidden;
        }

        .layout {
            width: var(--game-width);
            height: 100%;
            background-color: var(--bg-color);
            color: #fff;
        }

        .layout .layout-top {
            width: 100%;
            height: 60px;
            flex-direction: row;
            justify-content: space-between;
        }

        .layout .layout-container {
            width: var(--game-width);
            height: var(--game-height);
            border: 3px solid var(--border-color);
            margin: 10px 0;
        }

        .game-container {
            width: 100%;
            height: 100%;
            display: grid;
            grid-template-columns: repeat(var(--game-row), 0fr);
            /* 4列 无间隙 */
        }

        .layout .layout-bottom {
            width: 100%;
            height: 100px;
        }

        .gama-next-block-container {
            width: 100%;
            height: 100%;
            flex-direction: row;
            justify-content: space-between;
        }

        .is-droping {
            visibility: hidden;
        }

        .is-droping .next-cell {
            /* width: var(--block-width);
            height: var(--block-height); */
            visibility: hidden;
        }

        .next-block {
            /* width: calc(var(--next-block-width) * 5); */
            /* height: calc(var(--next-block-height) * 5); */
            padding: 8px;
            background-color: #e68989;
            display: grid;
            /* grid-template-columns: repeat(var(--next-block-row), 0fr); 4列 无间隙 */
        }

        #target {
            border: 1px solid black;
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <h1>Example of <code>DataTransfer.setDragImage()</code></h1>
    <div>
        <p id="source" ondragstart="dragstart_handler(event);" draggable="true">
            Select this element, drag it to the Drop Zone and then release the selection to move the element.</p>
    </div>
    <h1 class="title">title</h1>
    <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
</body>
<script>
    const title = document.querySelector('.title');
    function dragstart_handler(ev) {
        console.log("dragStart");
        // 设置拖动的格式和数据。使用事件目标的 id 作为数据
        ev.dataTransfer.setData("text/plain", ev.target.id);
        // 创建一个图像并且使用它作为拖动图像
        // 请注意：改变 "example.gif" 为一个已经存在的图片
        // 或者，一个还没有创建出来的图片，那么浏览器将会使用默认的拖动图片
        // 译者注：默认的拖动图片与拖动对象没有联系。一般是一个小型文件图标
        var img = new Image();
        img.src = '002-百变方块.png';
        ev.dataTransfer.setDragImage(img, 10, 10);
        // ev.dataTransfer.setDragImage(title, 10, 10);
    }

    function dragover_handler(ev) {
        console.log("dragOver");
        ev.preventDefault();
    }

    function drop_handler(ev) {
        console.log("Drop");
        ev.preventDefault();
        // 获取拖放目标的 id 数据
        var data = ev.dataTransfer.getData("text");
        ev.target.appendChild(document.getElementById(data));
    }
</script>
</html>